<!--
 * @Author: 赵天天
 * @LastEditors: 赵天天
 * @email: dayday_1996@163.com
 * @Descripttion: 
 * @version: 
 * @Date: 2019-04-28 17:23:46
 * @LastEditTime: 2019-05-21 15:45:19
 -->
<template>
    <div id="reportformid">
        <div class="leftbox">
           <div style="border-bottom:1px solid #eeeeee;">
                <p style="height:50px; 
                      padding-left:20px; 
                      line-height:50px;
                      font-size:14px;
                      color:#5c6781;
                      margin-bottom:0;
                      font-weight:900">报告条件筛选</p>
           </div>
            <div>
                <div class="selectform">
                    <span class="selecttitle">报告年份：</span>
                    <at-date-picker v-model="years"  type="year" placeholder="选择年份" :picker-options="pickerOptions0"></at-date-picker>
                </div>
                
                <div class="selectform">
                    <span class="selecttitle">报告周期：</span>
                    <at-select v-model="cycle" plceholder="标志为" type="formselect" @change="changeCycle">
                        <at-option v-for="item in options" :key="item['value']" :label="item.label" :value="item.value"></at-option>
                    </at-select>
                </div>
                
                <div class="selectform">
                    <span class="selecttitle">报告时间：</span>
                    <at-select v-model="time" plceholder="标志为" type="formselect" @change="getReportname">
                        <at-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></at-option>
                    </at-select>
                </div>
                
                <ul style="padding:0 20px; margin-top: 20px;">
                    <li  v-for="(value,index)  in timearr" 
                         :key="index"  
                         @click="gettime(index)" 
                         :class="value.classflag?'timelined':'timelinedisactive'">{{value.data}}</li>
                </ul>
            </div>
        </div>
        <div class="rightbox" id="PDFa" style="overflow: hidden">
            <div class="first">
                <div style="margin-left: 20px;">
                   <at-steps :space="100" direction="vertical" :active= "steps.active">
                    <at-step 
                            v-for="(item,index) in steps.step"
                            :key='index'
                            :title='item.title'
                            @click.native="jumpmsg(index)">
                        </at-step>
                   </at-steps>
                </div>
                
            </div>
            <div style="border-left: 1px solid #EEEEEE; 
                       float:right; 
                       width: calc(100% - 182px);" >
                <div class="second" >
                    <p style="height: 50px; 
                        padding-left: 20px; 
                        line-height: 50px;
                        font-size: 30px;
                        text-align: center;
                        color: #5c6781;
                        margin-bottom: 0;
                        margin-top: 20px;
                        ">{{title}}</p>
                    <p style="height: 22px; 
                        padding-left: 20px; 
                        line-height: 22px;
                        font-size: 12px;
                        text-align: center;
                        color: #5c6781;
                        margin-bottom: 0;
                        ">{{stitle}}</p>
                    <at-button class="isshow" style="float:right; 
                                                    height:24px; 
                                                    line-height:24px;
                                                    margin-right: 20px;"
                        type='primary'  @click="pdfdownload">
                       <i class="saas-icon-res-down" 
                                 style="font-size:20px; 
                                        margin-right: 5px; 
                                        vertical-align: -4px; ">
                        </i>PDF下载
                    </at-button>
                </div>

                <div class="third">
                    <div ref='index0' index=0>
                        <p class="titleclass d_jump">一、监测情况综述</p>
                        <p class="contentmsg">
                          此报告期间内共监测了{{tableattackevent.unit}}家单位，共采集到{{tableattackevent.total}}个安全事件，以及{{tableSafetotal.total}}条相关监测日志，各类数据分布如下：
                        </p>
                        <div style=" border-bottom: 1px solid #eeeeee; padding-bottom: 30px;" >
                           <p class="titlemsg">上报单位分布</p>
                           <!-- 各类日志数量统计 -->
                           <div id="attacks" :style='tableattackevent.HEIGHT'></div>
                        </div>


                        <div style="border-bottom: 1px solid #eeeeee; padding-bottom: 30px;">
                          <!-- 各类日志数量统计 -->
                          <p class="titlemsg">日志类型分布</p>
                        <div id="logDataStatistics" :style="'height:'+tableSafetotal.HEIGHT"></div>
                        <!-- 暂无数据时 显示图片 -->
                        <div v-if="tableSafetotal.total == 0 " style="text-align: center; ">
                          <img style="width:250px; height:250px;" 
                              src="../../../images/asset/noData.png" alt="暂无数据">
                        </div>
                        
                        </div>
                    </div>
                    
                    <div ref='index1' index = 1>
                        <p class="titleclass d_jump">二、安全分析综述</p>
                        <p class="contentmsg">
                          此报告期间内，对{{tableattackevent.total}}个安全事件进行了分析研判，共生成了{{tableitemlevel.total}}个风险事项以及{{tableitemWarning.totalitemWarning}}个风险预警，具体分布情况如下
                        </p>
                        <div class="contentblock" style=" padding-bottom: 30px; border-bottom: 1px solid #eeeeee">
                            <div  class="linecontent">
                               <p class="titlemsg" >风险事项等级分布</p>
                               <div  style='height:200px;' id="levelStatistics"></div>
                            </div>
                            <div class="linecontent" style="padding-bottom: 0px;">
                                <p class="titlemsg">风险预警状态分布</p>
                                <div  style='height:200px;' id="riskWarningStatistics">hh</div>
                            </div>
                        </div>
                    </div>

                    <div ref='index2' index = 2>
                        <p class="titleclass d_jump">三、按需监测综述</p>
                        <p class="contentmsg">
                          此报告区间内共下发了{{tableloadDepth.total1+tabletraffic.total1+tableauditMonitor.total1+tablevulnerability.total1}}个按需监测任务，其中载荷深度分析任务{{tableloadDepth.total1}}次，共收到反馈{{tableloadDepth.feedback1}}个，流量监测任务{{tabletraffic.total1}}个共收到反馈{{tabletraffic.feedback1
                                    }}次，审计监测任务{{tableauditMonitor.total1}}个共收到反馈{{tableauditMonitor.feedback1}}次，脆弱性监测任务{{tablevulnerability.total1}}个共收到反馈{{tablevulnerability.feedback1}}次。
                        </p>
                        <div class="contentblock" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee">
                            <div style="border-right: 1px solid #eee; padding-bottom: 0px;" class="linecontent" >
                               <p class="titlemsg">载荷深度分析</p>
                               <p class="contentmsg">
                                 在此期间内合计下发载荷深度分析任务{{tableloadDepth.total1}}， 各单位合计反馈{{tableloadDepth.feedback1}}个，具体分布如下：
                               </p>
                               <div :style='tableSysmsg.HEIGHT' id="loadDepthAnalysis"></div>
                            </div>
                            <div class="linecontent" style="padding-bottom: 0px;">
                              <div style="margin-left: 20px">
                                  <p class="titlemsg">流量监测分析</p>
                                  <p class="contentmsg">在此期间内合计下发流量监测任务{{tabletraffic.total1}}， 各单位合计反馈{{tabletraffic.feedback1
                                    }}个，具体分布如下：</p>
                                  <div  :style='tableSysmsg.HEIGHT' id="trafficMonitoring"></div>
                              </div>
                            </div>
                        </div>

                        <div class="contentblock" style=" border-bottom: 1px solid #eeeeee">
                            <div style="border-right: 1px solid #eee; padding-bottom: 0px;" class="linecontent">
                               <p class="titlemsg">审计监测分析</p>
                               <p class="contentmsg">在此期间内合计下发审计监测任务{{tableauditMonitor.total1}}， 各单位合计反馈{{tableauditMonitor.feedback1}}个，具体分布如下：</p>
                               <div  :style='tableSysmsg.HEIGHT' id="auditMonitoring"></div>
                            </div>
                            <div class="linecontent" style="padding-bottom: 0px;">
                              <div style="margin-left: 20px">
                                <p class="titlemsg">脆弱性监测分析</p>
                                <p class="contentmsg">在此期间内合计下发脆弱性监测任务{{tablevulnerability.total1}}， 各单位合计反馈{{tablevulnerability.feedback1}}个，具体分布如下：</p>
                                <div :style='tableSysmsg.HEIGHT' id="vulnerabilityMonitoring"></div>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import html2Canvas from '../../../utils/html2canvas.js'
import JsPDF from '../../../utils/jspdf.min.js'
import { toogle } from './js/reportFormsMixins.js'
export default {
  name: 'reportForms',
  mixins: [toogle],
  data () {
    // 日期格式化函数
    Date.prototype.format = function (fmt) {
      var o = {
        'M+': this.getMonth() + 1, // 月份
        'd+': this.getDate(), // 日
        'h+': this.getHours(), // 小时
        'm+': this.getMinutes(), // 分
        's+': this.getSeconds(), // 秒
        'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
        'S': this.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }
    return {

    }
  },
  mounted () {
    this.getReportname()
    this.getCycle()
    this.$nextTick(function () {
      window.addEventListener('scroll', this.onScroll)
    })
    this.gettime(0)
  },

  computed: {
    ...mapState({
      tableSafetotal: state => state.report.tableSafetotal,
      tableattackevent: state => state.report.tableattackevent,
      tableloadDepth: state => state.report.tableloadDepth,
      tableitemWarning: state => state.report.tableitemWarning,
      tabletraffic: state => state.report.tabletraffic,
      tableauditMonitor: state => state.report.tableauditMonitor,
      tablevulnerability: state => state.report.tablevulnerability,
      tableitemlevel: state => state.report.tableitemlevel,
      tableitemgrade: state => state.report.tableitemgrade,
      tableSysmsg: state => state.report.tableSysmsg,
      changeSizeValue: state => state.system.changeSizeValue
    })
  },

  watch: {
    /**
     * @description: 监听菜单栏收缩时，echarts图表重新加载
     * @param {新高度， 旧高度}
     */
    changeSizeValue (val) {
      if (document.getElementById('logDataStatistics') &&
            document.getElementById('attacks') &&
            document.getElementById('levelStatistics') &&
            document.getElementById('riskWarningStatistics') &&
            document.getElementById('differentTypesStatistics') &&
            document.getElementById('loadDepthAnalysis') &&
            document.getElementById('trafficMonitoring') &&
            document.getElementById('auditMonitoring') &&
            document.getElementById('vulnerabilityMonitoring')) {
        this.$echarts.init(document.getElementById('logDataStatistics')).resize()
        this.$echarts.init(document.getElementById('attacks')).resize()
        this.$echarts.init(document.getElementById('levelStatistics')).resize()
        this.$echarts.init(document.getElementById('riskWarningStatistics')).resize()
        this.$echarts.init(document.getElementById('differentTypesStatistics')).resize()
        this.$echarts.init(document.getElementById('loadDepthAnalysis')).resize()
        this.$echarts.init(document.getElementById('trafficMonitoring')).resize()
        this.$echarts.init(document.getElementById('auditMonitoring')).resize()
        this.$echarts.init(document.getElementById('vulnerabilityMonitoring')).resize()
      }
    },
    /**
     * @description: 监听路由改变，来确定echarts图表的高度，重新加载echarts
     * @param {新高度， 旧高度}
     */
    $route (to, from) {
      if (to.name === '@安全报告') {
        if (document.getElementById('logDataStatistics') &&
            document.getElementById('attacks') &&
            document.getElementById('levelStatistics') &&
            document.getElementById('riskWarningStatistics') &&
            document.getElementById('differentTypesStatistics') &&
            document.getElementById('loadDepthAnalysis') &&
            document.getElementById('trafficMonitoring') &&
            document.getElementById('auditMonitoring') &&
            document.getElementById('vulnerabilityMonitoring')) {
          this.$echarts.init(document.getElementById('logDataStatistics')).resize()
          this.$echarts.init(document.getElementById('attacks')).resize()
          this.$echarts.init(document.getElementById('levelStatistics')).resize()
          this.$echarts.init(document.getElementById('riskWarningStatistics')).resize()
          this.$echarts.init(document.getElementById('differentTypesStatistics')).resize()
          this.$echarts.init(document.getElementById('loadDepthAnalysis')).resize()
          this.$echarts.init(document.getElementById('trafficMonitoring')).resize()
          this.$echarts.init(document.getElementById('auditMonitoring')).resize()
          this.$echarts.init(document.getElementById('vulnerabilityMonitoring')).resize()
        }
      }
    },
    /**
     * @description: 监听机构数，来确定echarts图表的高度，重新加载echarts
     * @param {新高度， 旧高度}
     */
    'tableSysmsg.HEIGHT' (newName, oldName) {
      if (newName !== oldName) {
        let that = this
        setTimeout(function
        () {
          that.$echarts.init(document.getElementById('loadDepthAnalysis')).resize()
          that.$echarts.init(document.getElementById('trafficMonitoring')).resize()
          that.$echarts.init(document.getElementById('auditMonitoring')).resize()
          that.$echarts.init(document.getElementById('vulnerabilityMonitoring')).resize()
          that.$echarts.init(document.getElementById('attacks')).resize()
        }, 200)
      }
    },
    /**
     * @description: 监听日志数量，控制echarts的高度
     * @param {新高度， 旧高度}
     */
    'tableSafetotal.HEIGHT' (newName, oldName) {
      let that = this
      setTimeout(function () {
        that.$echarts.init(document.getElementById('logDataStatistics')).resize()
      }, 200)
    }
  },
  methods: {
    /**
     * @description: 当切换报告周期时，默认的参数
     */
    changeCycle () {
      this.timearr = []
      if (this.cycle === '季报') {
        this.time = 3
      } else {
        this.time = 1
      }
      this.getCycle()
    },
    /**
     * @description: 获得时间的范围
     */
    gettime (val) {
      for (let i = 0; i < this.timearr.length; i++) {
        this.timearr[i]['classflag'] = true
      }
      this.timearr[val]['classflag'] = false
      // 将该数据传入后天查询
      this.stitle = '(' + this.timerange[val] + ')'
      let timeRange = this.timerange[val].split(' - ')
      let selecttime = { 'startTime': timeRange[0],
        'endTime': timeRange[1] }
      this.title = '重要信息系统安全监测子平台' + this.cycle
      this.getCycle()
      this.$store.dispatch('report/drawBar', selecttime)
      this.$store.dispatch('report/drawTranBar', selecttime)
      this.$store.dispatch('report/drawPie', selecttime)
      this.$store.dispatch('report/staticLog', selecttime)
    },
    /**
     * @description: 不同报告周期，不同年份下的报告时间选项
     */
    getCycle () {
      this.yearstr = this.years.getFullYear()
      this.options2 = []
      let nowyear = new Date().getFullYear()
      let monthcount = 0
      if (this.yearstr < nowyear) {
        monthcount = 12
      } else if (this.yearstr == nowyear) {
        monthcount = new Date().getMonth() + 1
      }
      // this.title = '重要信息系统安全监测子平台' + this.cycle
      if (this.cycle == '周报' || this.cycle == '月报') {
        for (let n = 0; n < monthcount; n++) {
          this.options2.push({
            value: n + 1,
            label: this.years.getFullYear() + '年' + (n + 1) + '月份'
          })
        }
      } else if (this.cycle == '季报') {
        monthcount = Math.floor(1 + (monthcount - 1) / 3)
        for (let k = 0; k < monthcount; k++) {
          this.options2.push({
            value: (k + 1) * 3,
            label: this.years.getFullYear() + '年第' + (k + 1) + '季度'
          })
        }
      }
    },
    /**
     * @description: 获取查询的周报、月报、季报名字
     */
    getReportname () {
      this.yearstr = this.years.getFullYear()
      this.monthstr = this.yearstr + '-' + this.time
      let arr = []
      this.timerange = []
      let nowtimeday = new Date()
      if (this.cycle == '周报') {
        this.c = this.allWeeks(this.monthstr)
        for (let i = 0; i < this.c.length; i++) {
          let weektest = ''
          let weektime = this.c[i][0] + ' - ' + this.c[i][1]
          weektest = weektime + ' 第' + this.getWeek(this.c[i][0]) + '周 重要信息系统安全周报'

          if (nowtimeday > new Date(weektime.split(' - ')[0])) {
            this.timerange.push(weektime)
            arr.push({
              'classflag': true,
              'data': weektest
            })
          }
        }
        this.timearr = arr
      } else if (this.cycle == '月报') {
        let monthtest = ''
        let monthtime = this.yearstr + '-' + this.time + '-01 - ' + this.yearstr + '-' + this.time + '-' + this.getMonth(this.yearstr, this.time)
        monthtest = monthtime + ' ' + this.time + '月份 重要信息系统安全月报'
        arr.push({
          'classflag': true,
          'data': monthtest
        })
        if (nowtimeday > new Date(monthtime.split(' - ')[0])) {
          this.timerange.push(monthtime)
          this.timearr = arr
        }
      } else if (this.cycle == '季报') {
        let fourtest = ''
        let quarter = ''
        if (this.time == '03') {
          quarter = this.yearstr + '-01-01 - ' + this.yearstr + '-' + this.time + '-' + this.getMonth(this.yearstr, this.time)
          fourtest = quarter + ' 第一季度 重要信息系统安全季报'
        } else if (this.time == '06') {
          quarter = this.yearstr + '-04-01 - ' + this.yearstr + '-' + this.time + '-' + this.getMonth(this.yearstr, this.time)
          fourtest = quarter + ' 第二季度 重要信息系统安全季报'
        } else if (this.time == '09') {
          quarter = this.yearstr + '-07-01 - ' + this.yearstr + '-' + this.time + '-' + this.getMonth(this.yearstr, this.time)
          fourtest = quarter + ' 第三季度 重要信息系统安全季报'
        } else if (this.time == '12') {
          quarter = this.yearstr + '-10-01 - ' + this.yearstr + '-' + this.time + '-' + this.getMonth(this.yearstr, this.time)
          fourtest = quarter + ' 第四季度 重要信息系统安全季报'
        }
        if (nowtimeday > new Date(fourtest.split(' - ')[0])) {
          arr.push({
            'classflag': true,
            'data': fourtest
          })
          this.timerange.push(quarter)
        }
        this.timearr = arr
      }
    },
    /**
     * @description: 获取每周起始日期和终止日期
     * @param {当前月数}
     * @return: 这个月的周日期
     */
    allWeeks (now_month) {
      let week_array = []
      let today = new Date(Date.parse(now_month))
      let year = today.getFullYear()
      let month = today.getMonth()
      let i = 0
      let start = new Date(year, month, 1) // 得到当月第一天
      let end = new Date(year, month + 1, 0) // 得到当月最后一天
      let start_day = start.getDay() // 当月第一天是周几
      switch (start_day) {
        case 0: i = 0 + 2; break
        case 1: i = 0 + 1; break
        case 2: i = 0 - 0; break
        case 3: i = 0 - 1; break
        case 4: i = 0 - 2; break
        case 5: i = 0 - 3; break
        case 6: i = 0 - 4; break
      }
      while (new Date(year, month, i + 6) <= end) {
        week_array.push([ new Date(year, month, i).format('yyyy-MM-dd'),
          new Date(year, month, i + 6).format('yyyy-MM-dd')
        ]
        )
        i += 7
      }
      return week_array
    },
    /**
     * @description: 获取当前周是该年的第几周
     * @param {日期}
     * @return: 周数
     */
    getWeek (dt) {
      let d1 = new Date(dt)
      let d2 = new Date(dt)
      d2.setMonth(0)
      d2.setDate(1)
      let rq = d1 - d2
      let days = Math.ceil(rq / (24 * 60 * 60 * 1000))
      let num = Math.ceil(days / 7)
      return num
    },
    /**
     * @description: 获取当前月有多少天
     * @param {年，月}
     * @return: 天数
     */
    getMonth (year, month) {
      var stratDate = new Date(year, month - 1, 1)
      var endDate = new Date(year, month, 1)
      var days = (endDate - stratDate) / (1000 * 60 * 60 * 24)
      return days
    },
    /**
     * @description: PDF下载
     */
    pdfdownload () {
      let pdfDom = document.querySelector('#PDFa')
      html2Canvas(pdfDom).then(canvas => {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 592
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        // 名字 同stitle
        PDF.save(this.stitle + '.pdf')
      })
    },
    /**
     * @description: 快速跳转标签
     * @param {索引值}
     */
    jumpmsg (index) {
      // 用 class="d_jump" 添加锚点
      let jump = document.querySelectorAll('.d_jump')
      let total = jump[index].offsetTop
      let distance = document.documentElement.scrollTop || document.body.scrollTop
      // 平滑滚动，时长500ms，每10ms一跳，共50跳
      let step = total / 50
      if (total > distance) {
        smoothDown()
      } else {
        let newTotal = distance - total
        step = newTotal / 50
        smoothUp()
      }
      function smoothDown () {
        if (distance < total) {
          distance += step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          setTimeout(smoothDown, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
        }
      }
      function smoothUp () {
        if (distance > total) {
          distance -= step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          setTimeout(smoothUp, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
        }
      }
    },
    /**
     * @description: 监听滚动条的位置
     */
    onScroll () {
      let scrolled = document.documentElement.scrollTop || document.body.scrollTop
      // 取到第二部分距页面的高度
      let height0 = this.$refs.index0.offsetHeight
      let height1 = this.$refs.index1.offsetHeight
      // 取到第三部分距页面的高度
      // 586、1063分别为第二个和第三个锚点对应的距离
      if (scrolled >= height0 + height1) {
        this.steps.active = 2
      } else if (scrolled < height0 + height1 && scrolled >= height0) {
        this.steps.active = 1
      } else {
        this.steps.active = 0
      }
    }

  }
}
</script>
<style  lang='less'>
@import './style/reportForms.less';
</style>

<!-- 组件内部样式 -->
<style>
#reportformid .at-step__head.is-text.is-process .at-step__icon {
    width: 8px;
    height: 8px;
    display: block;
    background-color: #4990ff;
    border-radius: 50%;
    /* line-height: 38px; */
    margin: 0px;
    font-size: 0;
}
#reportformid .at-step__head.is-text.is-process {
    color: #fff;
    width: 8px;
    height: 8px;
    border:none;
}
#reportformid .at-step__head {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin:2px;
    background-color: transparent;
}
#reportformid .at-step__head.is-text {
    font-size: 0px;
    background: #EEEEEE;
}

#reportformid .at-step__title {
    font-size: 12px;
    line-height: 10px;
    display: inline-block;
    margin: 5px;
}

#reportformid  .at-step__line.is-vertical {
    width: 2px;
    box-sizing: border-box;
    top: 16px;
    bottom: 0;
    left: 5px;
}

#reportformid .at-date-picker {
    min-width: 385px;
}

 #reportformid .at-formselect .at-input{
    width: 380px;
 }
 #reportformid .at-input input{
    width: 380px;
 }
#reportformid  .at-step__main {
    white-space: normal;
    padding-right: 10px;
    text-align: left;
    margin-top: -5px;
}
#reportformid .at-step__title.is-wait {
    font-weight: 400;
    color: #5c6781;
}
#reportformid  .at-step__main:hover{
   cursor: pointer;
}

#reportformid  .at-step__title.is-process {
    font-weight: 900;
    color: #4990ff;
}

#reportformid  .at-step__title.is-finish {
    color: #5c6781;
}
</style>
